<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>懒加载</title>
  <script type="text/javascript" src="../jquery-3.2.0.slim.min.js"></script>
  <style>
    ul,li{
      list-style:none;
    }
    .container {
      width: 690px;
      margin: 0 auto;
    }
    .container li{
      float: left;
      margin: 15px 15px;
    }
    .container li img{
      width: 200px;
      height: auto;
      
    }
    body{
          background: #D393FF radial-gradient(#D393FF, #090909);
    }
    
  </style>
</head>
<body>
  <ul class="container">
    <li><a href="#"><img src="./load.jpg" data-src="./img.jpg" alt=""></a></li>
    <li><a href="#"><img src="./load.jpg" data-src="./img.jpg" alt=""></a></li>
    <li><a href="#"><img src="./load.jpg" data-src="./img.jpg" alt=""></a></li>
    <li><a href="#"><img src="./load.jpg" data-src="./img.jpg" alt=""></a></li>
    <li><a href="#"><img src="./load.jpg" data-src="./img.jpg" alt=""></a></li>
    <li><a href="#"><img src="./load.jpg" data-src="./img.jpg" alt=""></a></li>
    <li><a href="#"><img src="./load.jpg" data-src="./img.jpg" alt=""></a></li>
    <li><a href="#"><img src="./load.jpg" data-src="./img.jpg" alt=""></a></li>
    <li><a href="#"><img src="./load.jpg" data-src="./img.jpg" alt=""></a></li>
    <li><a href="#"><img src="./load.jpg" data-src="./img.jpg" alt=""></a></li>
    <li><a href="#"><img src="./load.jpg" data-src="./img.jpg" alt=""></a></li>
    <li><a href="#"><img src="./load.jpg" data-src="./img.jpg" alt=""></a></li>
    <li><a href="#"><img src="./load.jpg" data-src="./img.jpg" alt=""></a></li>
    <li><a href="#"><img src="./load.jpg" data-src="./img.jpg" alt=""></a></li>
    <li><a href="#"><img src="./load.jpg" data-src="./img.jpg" alt=""></a></li>
    <li><a href="#"><img src="./load.jpg" data-src="./img.jpg" alt=""></a></li>
    <li><a href="#"><img src="./load.jpg" data-src="./img.jpg" alt=""></a></li>
    <li><a href="#"><img src="./load.jpg" data-src="./img.jpg" alt=""></a></li>
    <li><a href="#"><img src="./load.jpg" data-src="./img.jpg" alt=""></a></li>
    <li><a href="#"><img src="./load.jpg" data-src="./img.jpg" alt=""></a></li>
    <li><a href="#"><img src="./load.jpg" data-src="./img.jpg" alt=""></a></li>
    <li><a href="#"><img src="./load.jpg" data-src="./img.jpg" alt=""></a></li>
    <li><a href="#"><img src="./load.jpg" data-src="./img.jpg" alt=""></a></li>
    <li><a href="#"><img src="./load.jpg" data-src="./img.jpg" alt=""></a></li>
    <li><a href="#"><img src="./load.jpg" data-src="./img.jpg" alt=""></a></li>
    <li><a href="#"><img src="./load.jpg" data-src="./img.jpg" alt=""></a></li>
    <li><a href="#"><img src="./load.jpg" data-src="./img.jpg" alt=""></a></li>
    <li><a href="#"><img src="./load.jpg" data-src="./img.jpg" alt=""></a></li>
    <li><a href="#"><img src="./load.jpg" data-src="./img.jpg" alt=""></a></li>
    <li><a href="#"><img src="./load.jpg" data-src="./img.jpg" alt=""></a></li>
    <li><a href="#"><img src="./load.jpg" data-src="./img.jpg" alt=""></a></li>
    <li><a href="#"><img src="./load.jpg" data-src="./img.jpg" alt=""></a></li>
    <li><a href="#"><img src="./load.jpg" data-src="./img.jpg" alt=""></a></li>
   </ul>
  <script type="text/javascript">
    $(window).on('scroll',function(){
      check();
    });
    
    check();
    
    function check(){
      $('.container img').each(function(){
        var $cur = $(this);
        
        if($cur.attr('isLoading')){
          return;
        }
        
        if(isShow($cur)){
          setTimeout(function(){
            showImg($cur);
          },300)
          
        }
      });
    }
    
    
    function isShow($el){
      var scrollH = $(window).scrollTop(),
      winH = $(window).height(),
      top = $el.offset().top;
      
      if(top < winH + scrollH){
        return true;
        
      }else{
        return false;
      }
    }
    
    function showImg($el){
      $el.attr('src',$el.attr('data-src'));
      $el.attr('isLoading',true);
    }
    
    
    
  </script>
</body>
</html>


















